<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="searchConditions"
          label-width="110px"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="行业" class="row-padding-bottom">
              <el-select
                clearable
                filterable
                placeholder="请选择行业"
                v-model="filterField.industryId"
              >
                <el-option
                  v-for="item in industryOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="建设方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pcName"
                  placeholder="请输入建设方"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pbName"
                  placeholder="请输入施工方"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="当前状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.projectStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类别" class="row-padding-bottom">
                <el-select
                  clearable
                  filterable
                  placeholder="请选择"
                  v-model="filterField.investment"
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="申请调整状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.applyStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="申请日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="审核状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.auditStatus"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in checkOptions"
                    :key="item.id"
                    :label="item.text"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 54px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                v-hasBtn="'projectStatusChange:export'"
                type="primary"
                icon="icon iconfont icondaochu"
                @click="exportExcel"
                class="commonBtn saveBtn funComBut"
                >导出</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <!-- 表格 -->
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @sort-change="sortChange"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="projectName" label="项目名称" min-width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="pcName"
            label="建设方"
            align="left"
            :formatter="formatTd"
            min-width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pcName"
                :columnName="'pcName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方"
            align="left"
            :formatter="formatTd"
            min-width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectStatusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="investmentDesc"
            label="投资类型"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="startDate"
            label="开工时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="applyStatusDesc"
            label="申请调整状态"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="申请时间"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="auditStatusDesc"
            label="审核状态"
            align="center"
            :formatter="formatTd"
            width="150"
          ></el-table-column>
          <el-table-column
            label="附件"
            align="center"
            width="100"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-link
                @click="getUploadFile(scope.row.id)"
                type="primary"
                style="margin-right: 0 !important"
              >
                查看
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="130">
            <template slot-scope="scope">
              <!-- <template v-if="scope.row.auditStatus==='WAIT'">
                            <el-link v-hasBtn="'projectStatusChange:update'" @click="showDialog(scope.row,'change')" type="primary">变更</el-link>
                            <el-link v-hasBtn="'projectStatusChange:update'" @click="showDialog(scope.row,'refuse')" type="primary">驳回</el-link>
                        </template> -->
              <template>
                <!-- <el-link @click="seeDetail(scope.row)" type="primary"  v-hasBtn="'projectStatusChange:update'" >查看</el-link> -->
                <el-link
                  v-if="scope.row.auditStatus === 'WAIT'"
                  v-hasBtn="'projectStatusChange:update'"
                  @click="audit(scope.row)"
                  type="primary"
                  >审核</el-link
                >
                <span v-else>--</span>
              </template>
              <!-- <template v-else>
                            <span>--</span>
                        </template> -->
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
    <!-- <el-dialog :title="type==='change'?'确定变更':'驳回'" :visible.sync="examineDialog" @close="closeDialog" :close-on-click-modal="false" :modal-append-to-body="false" width="550px">
            <el-form :model="formData" ref="changeForm" label-width="80px">
                <el-form-item :label-width="type==='change'?'40px':'10px'">
                    <p v-if="type==='change'">确定将【{{formData.projectName}}】的状态从{{formData.projectStatusDesc}}调整为{{formData.applyStatusDesc}}？</p>
                    <p v-else>将驳回【{{formData.projectName}}】从{{formData.projectStatusDesc}}调整为{{formData.applyStatusDesc}}的申请！</p>
                </el-form-item>
                <el-form-item :label="type==='change'?'备注':'驳回原因'">
                    <el-input v-model="formData.remark" type="textarea" maxlength="50" show-word-limit :placeholder="type==='change'?'请输入备注':'请输入驳回原因'" clearable></el-input>
                </el-form-item>
            </el-form>
            <div div slot="footer" class="dialog-footer">
                <el-button @click.native="closeDialog" class="cancel">取消</el-button>
                <el-button type="primary" @click.native="submitForm('changeForm')" v-sdc :loading="isSaveLoading" class="save">确定</el-button>
            </div>
        </el-dialog> -->
    <el-dialog
      title="查看详情"
      :visible.sync="detailDialog"
      @close="closeDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="640px"
    >
      <el-form ref="changeForm" label-width="80px">
        <el-row>
          <el-col :span="24" class="labelWidthSty">
            <span class="gridContent color333 fontSizeF fontWeight"
              >备注：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">{{
              remarkDetail || '--'
            }}</span>
          </el-col>
          <el-col :span="24" class="labelWidthSty detailInfoItemSty mrB30">
            <span class="gridContent color333 fontSizeF fontWeight"
              >附件：</span
            >
            <span class="gridContent empContentSty color666 fontSizeF">
              <span v-if="fileList.length > 0">
                <span>已上传</span>
                <span class="seeFile" @click="toUploadFile(fileList)"
                  >查看</span
                >
              </span>
              <span v-else>未上传</span>
            </span>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div div slot="footer" class="dialog-footer">
                <el-button @click.native="closeDialog" class="cancel">取消</el-button>
                <el-button type="primary" class="save" @click.native="closeDialog" >确定</el-button>
            </div> -->
    </el-dialog>
    <el-dialog
      title="审核"
      :visible.sync="auditDialog"
      @close="auditCloseDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="640px"
    >
      <el-form
        :model="formDataAudit"
        label-width="120px"
        :rules="formRulesAudit"
        ref="formDataAudit"
        style="padding-top: 8px"
      >
        <el-form-item
          label="处理方法："
          class="row-padding-bottom"
          prop="approach"
        >
          <el-select
            v-model="formDataAudit.approach"
            placeholder="请选择"
            class="dialogSingleInp"
          >
            <el-option
              v-for="item in methodList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" class="row-padding-bottom" prop="remark">
          <el-input
            v-model="formDataAudit.remark"
            type="textarea"
            maxlength="50"
            :rows="3"
            show-word-limit
            placeholder="请输入"
            clearable
            @blur="formDataAudit.remark = changeValue($event)"
            class="dialogSingleInp"
          ></el-input>
        </el-form-item>
      </el-form>
      <div div slot="footer" class="dialog-footer">
        <el-button @click.native="auditCloseDialog" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="submitForm"
          v-sdc
          :loading="isSaveLoading"
          class="save"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <contractEnclosureDialog
      v-if="uploadContract"
      dialogTitle="附件"
      :tableData="fileData"
      @closeDialog="hiddenDialog"
    ></contractEnclosureDialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'projectStatusChange',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '状态变更',
      checkOptions: [],
      tableList: [],
      requestUrl: 'api-p/projectstatusapply/expand/list',
      filterField: {
        projectName: '',
        industryId: '',
        pcName: '',
        pbName: '',
        projectStatus: '', //当前状态
        investment: '',
        applyStatus: '', //申请调整状态
        startDateStr: '',
        endDateStr: '',
        auditStatus: '', //审核状态
      },
      pageSize: 20,
      pageNo: 1,
      loading: false,
      isShow: false,
      examineDialog: false, //弹窗
      type: '',
      formData: {
        id: '',
        remark: '',
        projectName: '',
        projectStatusDesc: '',
        applyStatusDesc: '',
      },
      isSaveLoading: false,
      detailDialog: false,
      fileList: [],
      fileData: [],
      uploadContract: false, //查看
      auditDialog: false, //审核
      formDataAudit: {
        id: '',
        remark: '',
        approach: '', //处理方法
      },
      formRulesAudit: {
        remark: [
          {
            required: true,
            message: '请输入驳回原因',
            trigger: 'change',
          },
        ],
        approach: [
          { required: true, message: '处理方法不能为空', trigger: 'blur' },
        ],
      },
      methodList: [
        { name: '通过', id: '01' },
        { name: '驳回', id: '02' },
      ],
      remarkDetail: '',
      advanced: false,
    }
  },
  computed: {
    ...mapState(['industryOptions', 'statusOptions', 'investmentOptions']),
  },
  mounted() {
    this.getApplyStatus()
    this.$nextTick(() => {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  created() {
    this.filterField.projectName = this.$route.query.projectName
      ? this.$route.query.projectName
      : ''
    this.filterField.auditStatus = this.$route.query.auditStatus
      ? this.$route.query.auditStatus
      : ''
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    // 审核状态
    getApplyStatus() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstatusapply/expand/findaudit',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.checkOptions = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 列表
    getTableList(data) {
      this.tableList = data
      // this.tableList = [{id: "412881e479f5fd16017a1cb83cbc0077", applyStatus: "STOPPED", auditStatus: "WAIT",
      //                     applyStatus: "STOPPED",
      //                     applyStatusDesc: "已停工",
      //                     auditStatus: "WAIT",
      //                     auditStatusDesc: "待处理",
      //                     createTime: "2021-06-18",
      //                     id: "412881e479f5fd16017a1cb83cbc0077",
      //                     industryId: "01",
      //                     industryName: "住建",
      //                     investment: "GOV",
      //                     investmentDesc: "政府投资",
      //                     pbName: "湖北会基网络科技有限公司",
      //                     pcName: "湖北会基网络科技有限公司",
      //                     projectName: "一键办事测试项目",
      //                     projectStatus: "COMPLETED",
      //                     projectStatusDesc: "已竣工",
      //                     startDate: "2021-06-01"}];
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDateStr = val
      } else {
        this.filterField.startDateStr = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDateStr = val
      } else {
        this.filterField.endDateStr = ''
      }
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstatusapply/expand/list',
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 导出
    async exportExcel() {
      const flag = await this.getExports()
      const {
        projectName,
        industryId,
        pcName,
        pbName,
        projectStatus,
        investment,
        applyStatus,
        startDateStr,
        endDateStr,
        auditStatus,
        sortField,
        sort,
      } = this.filterField
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-p/projectstatusapply/expand/export?projectName=' +
          projectName +
          '&industryId=' +
          industryId +
          '&pcName=' +
          pcName +
          '&pbName=' +
          pbName +
          '&projectStatus=' +
          projectStatus +
          '&investment=' +
          investment +
          '&applyStatus=' +
          applyStatus +
          '&startDateStr=' +
          startDateStr +
          '&endDateStr=' +
          endDateStr +
          '&auditStatus=' +
          auditStatus +
          '&sortField=' +
          sortField +
          '&sort=' +
          sort +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    //弹窗
    showDialog(
      { id, projectName, projectStatusDesc, applyStatusDesc } = row,
      type
    ) {
      this.examineDialog = true
      this.type = type
      this.formData.id = id
      this.formData.remark = ''
      this.formData.projectName = projectName
      this.formData.projectStatusDesc = projectStatusDesc
      this.formData.applyStatusDesc = applyStatusDesc
    },
    closeDialog() {
      // this.examineDialog = false;
      this.detailDialog = false
    },
    // submitForm1(formName) {
    //     this.$refs[formName].validate((valid) => {
    //         if (valid) {
    //             this.isSaveLoading = true;
    //             let url = 'api-p/projectstatusapply/expand/complete';
    //             let { id, remark } = this.formData;
    //             let data = { id, remark }
    //             if (this.type === 'refuse') {
    //                 url = 'api-p/projectstatusapply/expand/refuse';
    //             }
    //             this.axios({
    //                 method: "post",
    //                 url,
    //                 data,
    //             })
    //                 .then((response) => {
    //                     if (response.data.hasError) {
    //                         this.$message.error(response.data.errorMsg);
    //                     } else {
    //                         this.$message.success('操作成功');
    //                         this.examineDialog = false;
    //                         this.$refs.pagination.getTableListData(this.pageNo, this.pageSize);
    //                     }
    //                     this.isSaveLoading = false;
    //                 })
    //                 .catch((error) => {
    //                     if (error.response) {
    //                         this.$message.error(error.response.data);
    //                     }
    //                     this.isSaveLoading = false;
    //                 });
    //         }
    //         else {
    //             return false
    //         }
    //     })
    // },
    submitForm() {
      this.$refs['formDataAudit'].validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          let url
          let { id, remark } = this.formDataAudit
          let data = { id, remark }
          if (this.formDataAudit.approach == '02') {
            url = 'api-p/projectstatusapply/expand/refuse'
          } else {
            url = 'api-p/projectstatusapply/expand/complete'
          }
          this.axios({
            method: 'post',
            url,
            data,
          })
            .then((response) => {
              if (response.data.hasError) {
                this.$message.error(response.data.errorMsg)
              } else {
                this.$message.success('操作成功')
                this.auditDialog = false
                this.$refs.pagination.getTableListData(
                  this.pageNo,
                  this.pageSize
                )
              }
              this.isSaveLoading = false
            })
            .catch((error) => {
              if (error.response) {
                this.$message.error(error.response.data)
              }
              this.isSaveLoading = false
            })
        } else {
          return false
        }
      })
    },
    seeDetail(row) {
      this.detailDialog = true
      this.getDetail(row.id)
    },
    getUploadFile(id) {
      this.getDetail(id)
      // this.fileData = fileList;
      // this.uploadContract = true;
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    audit(row) {
      this.formDataAudit.approach = ''
      this.formDataAudit.remark = ''
      this.auditDialog = true
      this.formDataAudit.id = row.id
      // 去除之前的验证
      this.$nextTick(() => {
        this.$refs.formDataAudit.clearValidate()
      })
    },
    auditCloseDialog() {
      this.auditDialog = false
    },
    // 获取详情
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-p/projectstatusapply/expand/find',
        data: { id: id },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            // this.remarkDetail = data.remark;
            this.fileData = data.fileExpandVOS
            this.uploadContract = true
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>
<style lang="less" scoped>
.mainCon {
  top: 197px;
}
.saveBtn /deep/ .iconfont {
  padding: 0 5px;
  font-size: 14px;
}
</style>
